<!-- saved from url=(0043)http://www.hao123.com/haoserver/htmtojs.htm -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        body {
            margin: 0
        }

        textarea {
            width: 760;
            height: 180;
            font-size: 9pt;
            font-family: Courier New;
            color: #666666
        }

        button {
            cursor: pointer;
        }
    </style>
    <title>合成图片工具</title>
    <style type="text/css">
        <!--
        td,
        body {
            font-size: 12px
        }

        a:link {
            color: #000000;
            text-decoration: none
        }

        a:visited {
            COLOR: #000000;
            TEXT-DECORATION: none
        }

        a:active {
            color: green;
            text-decoration: none
        }

        a:hover {
            color: red;
            text-decoration: underline
        }

        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            background-color: #fcfff7;
        }

        -->
    </style>
    <!--<base target="_blank">-->
    <base href="." target="_blank">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="../dropzone/dist/dropzone.js"></script>
    <link rel="stylesheet" href="../dropzone/dist/dropzone.css"/>
    <script>


        function transformation() {
            $.ajax({
                type: "post",
                url: '/transformation',
                data: {
                    "imgpath": $("#imgpath").val(),
                    "font": $("#font").val(),
                    "fontStyle": $("#fontStyle").val(),
                    "fontcolor": $("#fontcolor").val(),
                    "fontsize": $("#fontsize").val(),
                    "coordinateX": $("#coordinateX").val(),
                    "color_r": $("#color_r").val(),
                    "color_g": $("#color_g").val(),
                    "color_b": $("#color_b").val(),
                    "coordinateY_left": $("#coordinateY_left").val(),
                    "coordinateY_right": $("#coordinateY_right").val()

                },
                dataType: "text",
                success: function (data) {
                    document.getElementById("resultImg").src = data + "?" + Math.random();
                    $("#imgDownload").attr("href", data);
                    $("#resultImgTr").attr("style", "");

                }
            });
        }



    </script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
    <p>
        <font color="#FF0000">合成图片工具</font>&nbsp;&nbsp;
    </p>
    <table>
        <tr>
            <td><span>上传要合成的图片:</span></td>
            <td>
                <div id="dropz" class="dropzone" style="height: 200px; width: 400px;"> 上传图片</div>
                <input id="imgpath" style="display: none">

                <div class="x_content" id="messageBox" style="display: none;"></div>
            </td>
        </tr>
        <tr>
            <td><span> 请输入需要合成的文字</span></td>
            <td>
                <textarea id="font" style="height: 100px; width: 400px;" cols="10" rows="12"></textarea>
            </td>
        </tr>
        <tr>
            <td><span> 合成文字格式</span></td>
            <td>
                <select name="fontStyle" style="width: 100%;" id="fontStyle">
                    <option value="1">楷书</option>
                    <option value="2">宋体</option>
                    <option value="3">思源黑体</option>
                    <option value="4">思源黑体中文</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><span> 文字距离顶部的坐标 X轴</span></td>
            <td>
                <input type="text" id="coordinateX">
            </td>
        </tr>
        <tr>
            <td><span> 文字距离左边的坐标 Y轴</span></td>
            <td>
                <input type="text" id="coordinateY_left">
            </td>
        </tr>
        <tr>
            <td><span> 文字距离右边的坐标 Y轴</span></td>
            <td>
                <input type="text" id="coordinateY_right">
            </td>
        </tr>
        <tr>
            <td><span> 字体颜色</span></td>
            <td>
                <select name="fontcolor" style="width: 100%;" id="fontcolor">
                    <option value="1">红色</option>
                    <option value="2">蓝色</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><span> 自定义字体颜色</span></td>
            <td>
                R：<input type="text" id="color_r" style="width: 25%;">
                G：<input type="text" id="color_g" style="width: 25%;">
                B：<input type="text" id="color_b" style="width: 25%;">
            </td>
        </tr>
        <tr>
            <td><span> 自定义字体大小</span></td>
            <td>
                <input type="text" id="fontsize" style="width: 90%;"> px
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="btn-trans"   onclick="transformation();">转换</button>
            </td>
        </tr>
        <tr id="resultImgTr" style="display: none">
            <td colspan="2" style="height: 100px; width: 400px;">
                <a href="#" id="imgDownload" download="图片">
                    <img id="resultImg" style="height: 300px; width: 100%;"  src="#">
                </a>

            </td>
        </tr>
    </table>


</div>

</body>
<script>
    $("#dropz").dropzone({
        paramName: "file",
        addRemoveLinks: true,
        url: "/uploadFile",
        maxFiles: 1,
        maxFilesize: 15,
        acceptedFiles: ".jpg,.bmp,.png,.jpeg",
        dictInvalidFileType: "请上传格式为jpg、bmp、png、jpeg的图片",
        dictMaxFilesExceeded: "超过最大上传文件数量",
        dictDefaultMessage: "点击或拖拽上传",
        dictCancelUpload: "取消上传",
        dictCancelUploadConfirmation: "确定要取消此次上传吗?",
        dictRemoveFile: "删除",
        dictFileTooBig: "文件大小超过{{maxFilesize}}",
        init: function () {
            this.on("success", function (file, result) {
                if (result.retcode == 1000) {
                    $('#imgpath').val(result.path);
                    alert('文件上传成功!')
                } else {
                    $('#messageBox').show();
                    $('#messageBox').html('<code style="font-size:200%">' + result.retmsg + '</code>')
                }
            });
        }
    });
</script>
</html>